import {View, Text, StyleSheet} from 'react-native'
import React, {Component} from 'react'
import {dateFormat, defaultArr, defaultObj} from "../../../../util";
import {default as styles, padding, roundWithSize} from "../../../../style";
import {Rating} from "react-native-elements";
import FastImage from "react-native-fast-image";
import {Store} from "../../../../store";
import {inject, observer} from "mobx-react/custom";
import EmptyTip from "../../../common/EmptyTip";

interface EvaluationProps extends Store{

}

interface EvaluationState {

}

@inject("product")
@observer
export default class Evaluation extends Component<EvaluationProps, EvaluationState> {


    constructor(props: EvaluationProps) {
        super(props);
    }

    render() {
        const {productComments = defaultArr} = this.props.product;
        return (<View>
            {
                productComments.length? productComments[0].orderComment.map((comment = defaultObj, index) => {
                    let {user } = comment;
                    if(!user){
                        user = defaultObj;
                    }
                    return (<View key={index} style={[padding(16, 21), {borderTopWidth: 1, borderTopColor: "#e2e2e2"}]}>
                        <View
                            style={[styles.flexDirectionRowNotFlex, styles.justifyBetween, styles.centerH]}>
                            <View style={[styles.flexDirectionRowNotFlex, styles.centerH]}>
                                <FastImage style={[roundWithSize(25), {marginRight: 6}]}
                                           source={{uri: user.avatarUrl}}/>
                                <Text style={{fontSize: 14}}>{user.nickName}</Text>
                            </View>
                            <Text style={{fontSize: 12, color: "#999999"}}>{dateFormat(comment.createTime)}</Text>
                        </View>
                        <Rating
                            type="custom"
                            fractions={comment.star}
                            readonly
                            imageSize={12}
                            onFinishRating={null}
                            ratingColor={"#FF9300"}
                            ratingBackgroundColor={"#ccc"}
                            style={{paddingVertical: 10}}
                        />
                        <Text style={{color: "#333333", fontSize: 12}}>
                            {comment.comment}
                        </Text>

                    </View>)
                }):<EmptyTip style={{marginVertical:20}}/>
            }
        </View>)
    }
}

const EvaluationStyle = StyleSheet.create({
    container: {}
});

 